<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-实现异步请求</title>
    <!-- 导入 JQ 库文件 -->
    <script src="js/jquery-3.7.1.js"></script>
</head>
<body>
    <h1>Ajax-实现异步请求-向服务器发送数据</h1>
    <button id="btn1">方式一</button>
    <button id="btn2">方法二</button>

    <p>响应结果：<span id="jg"></span></p>

    <script>
        /*
            使用 JQ 实现异步请求 - jQuery == $
            注意：在 JQ 中，各选项的配置是以对象的方式进行配置，语法如下：

            {
                选项名称1：值 ,
                ...
                选项名称N:值
            }

         */
        $("#btn1").click(function(){
            $.ajax("send.do",{
                type:'post',
                // 方式一（字符串）：参数名1=值&参数名2=值&...&参数名N=值
                data:"name=zs&age=18",
                success:function(data){
                    $("#jg").text(data) ;
                }
            }) ;
        }) ;


        $("#btn2").click(function(){
            $.ajax("send.do",{
                type:'post',
                /* 方式二（对象）：
                    ｛
                        参数名1:值,
                        参数名2:值,
                        ...,
                        参数名N:值
                    ｝
                 */
                data:{
                    name:'ls',
                    age:28
                },
                success:function(data){
                    $("#jg").text(data) ;
                }
            }) ;
        }) ;

    </script>
</body>
</html>